<template>
  <div class="toolbox-toolbox">
    <div class="toolbox-minimap" v-show="showMinmap">
      <div
        class="toolbox-playground toolbox-playground-view"
        :style="{
          transform: `scale(${viewport.scale})`,
          width: viewport.conWidth + 'px',
          height: viewport.conHeight + 'px',
        }"
      >
        <!-- <template v-for="item in alignList">
          <div
            :class="[
              'toolbox-miniCard',
              { isUnFold: item.isUnFold || item.isLeftUnFold },
              'status' + item.objective.progressStatus,
            ]"
            :key="item.id"
            v-if="!item.type && !item.isFoldHide"
            :style="{ left: item.left + 'px', top: item.top + 'px' }"
          ></div>
          <objective-path
            v-if="item.type && !item.isFoldHide"
            :style="{
              position: 'absolute',
              left: item.left + 'px',
              top: item.top + 'px',
            }"
            :id="item.id"
            :key="item.id"
            :item="item"
          ></objective-path>
        </template> -->
      </div>
      <div
        class="toolbox-playground toolbox-playground-viewport"
        :style="{
          width: viewport.conWidth * viewport.scale + 'px',
          height: viewport.conHeight * viewport.scale + 'px',
        }"
      >
        <div
          class="toolbox-viewport"
          :style="{
            width: viewport.viewWidth + 'px',
            height: viewport.viewHeight + 'px',
            left: viewport.viewLeft + 'px',
            top: viewport.viewTop + 'px',
          }"
        >
          <!-- <button @click="scale('small')">缩小</button>   <button @click="scale('big')">放大</button>   -->
        </div>
      </div>
    </div>
    <!--  menu -->
    <div class="Toolbox-toolbar">
      <div class="Toolbox-menus">
        <span
          ><button
            type="button"
            class="people-btn Toolbox-menu"
            @click="showMinmap = !showMinmap"
          >
            <span role="img" class="okrx-icon okrx-icon-fold"
              ><svg
                width="1em"
                height="1em"
                viewBox="0 0 16 16"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2 3.333v9.334h12V3.333H2zM1.333 2a.667.667 0 00-.666.667v10.666c0 .368.298.667.666.667h13.334a.667.667 0 00.666-.667V2.667A.667.667 0 0014.666 2H1.333z"
                  fill="currentColor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10.266 8.333h1.973c.149 0 .203.016.257.045a.303.303 0 01.126.126c.029.054.044.108.044.257v.478c0 .149-.015.203-.044.257a.303.303 0 01-.126.126c-.054.03-.108.045-.257.045H8.666A.665.665 0 018 9V5.427c0-.148.015-.202.044-.256a.303.303 0 01.126-.126c.055-.03.109-.045.257-.045h.479c.148 0 .202.015.257.045a.303.303 0 01.126.126c.029.054.044.108.044.256v1.954l3.22-3.22c.13-.13.34-.13.47 0l.472.472c.13.13.13.342 0 .472l-3.229 3.228z"
                  fill="currentColor"
                ></path></svg
            ></span></button
        ></span>
        <div class="Toolbox-separator"></div>
        <span
          ><button
            type="button"
            :class="['people-btn Toolbox-menu', { default: scale == 25 }]"
            @click="scaleTo(-1)"
          >
            <svg viewBox="0 0 20 20">
              <path
                fill="currentColor"
                d="M5.833 8.75c0-.23.187-.417.417-.417h5.833c.23 0 .417.187.417.417v.833c0 .23-.187.417-.417.417H6.25a.417.417 0 01-.417-.417V8.75z"
              ></path>
              <path
                fill="currentColor"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M.833 9.167a8.333 8.333 0 0013.608 6.452l3.312 3.312a.417.417 0 00.589 0l.59-.59a.416.416 0 000-.588l-3.313-3.313A8.333 8.333 0 10.833 9.166zm15 0a6.667 6.667 0 11-13.333 0 6.667 6.667 0 0113.333 0z"
              ></path>
            </svg></button></span
        ><span
          ><button
            type="button"
            :class="['people-btn Toolbox-menu', { default: scale == 125 }]"
            @click="scaleTo(1)"
          >
            <svg viewBox="0 0 20 20">
              <path
                fill="currentColor"
                d="M6.25 8.333a.417.417 0 00-.417.417v.833c0 .23.187.417.417.417h2.083v2.083c0 .23.187.417.417.417h.833c.23 0 .417-.187.417-.417V10h2.083c.23 0 .417-.187.417-.417V8.75a.417.417 0 00-.417-.417H10V6.25a.417.417 0 00-.417-.417H8.75a.417.417 0 00-.417.417v2.083H6.25z"
              ></path>
              <path
                fill="currentColor"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.167 17.5a8.333 8.333 0 116.452-3.06l3.312 3.313a.416.416 0 010 .589l-.589.59a.417.417 0 01-.59 0l-3.311-3.313a8.299 8.299 0 01-5.274 1.88zm0-1.667a6.667 6.667 0 100-13.333 6.667 6.667 0 000 13.333z"
              ></path>
            </svg></button
        ></span>
        <div class="Toolbox-scale">{{ scale }}%</div>
      </div>
    </div>
  </div>
</template>

<script>
// import objectivePath from "./objective-path.vue"
export default {
  // props: {
  //   viewport: Object,
  //   alignList: Array,
  // },
  // components: {
  //   objectivePath,
  // },
  data () {
    return {
      grabbing: false,
      showMinmap: true,
      scrollTime: null,
      mouseMoveThrottle: null,
      scale: 100,
      keydown: {
        left: 0,
        top: 0,
      },
      //   bodyContainer: {
      //     scrollX: 0,
      //     scrollY: 0,
      //   },
      // 缩小视图
      viewport: {
        conWidth: 0,
        conHeight: 100,
        conTop: 0,
        conLeft: 0,
        viewTop: 0,
        viewLeft: 0,
        viewWidth: 0,
        viewHeight: 0,
        scale: 1,
        totalWidth: 173,
        totalHeight: 100
      },
    }
  },
  mounted () {
    this.$nextTick((_) => {
      var dom = document.querySelector(".toolbox-viewport")
      dom.addEventListener("mousedown", this.mouseDown)
      document.body.addEventListener("mouseup", () => {
        this.grabbing = false
        document.removeEventListener("mousemove", this.mouseMoveThrottle)
      })
    })
  },
  methods: {
    scaleTo (flag) {
      if (flag == 1) {
        if (this.scale >= 125) return
        this.scale += 25
      } else {
        if (this.scale <= 50) return
        this.scale -= 25
      }
      this.$emit("scaleTo", this.scale)
    },
    // mouseDown
    mouseDown (ev) {
      this.grabbing = true
      document.setCapture && document.setCapture() //低版本IE阻止默认事件，取消文字选中
      var ev = ev || window.event
      ev.preventDefault()
      ev.stopPropagation()
      this.keydown.left = ev.clientX
      this.keydown.top = ev.clientY
      this.mouseMoveThrottle = this.throttle(this.mouseMove, 80)
      document.addEventListener("mousemove", this.mouseMoveThrottle)
    },
    mouseMove (ev) {
      var ev = ev || window.event
      var left = ev.clientX
      var top = ev.clientY
      this.scrollTo(this.keydown.left - left, this.keydown.top - top)
      this.keydown.left = ev.clientX
      this.keydown.top = ev.clientY
    },

    throttle (fn, interval) {
      let disabled = false
      return (...arg) => {
        if (!disabled) {
          disabled = true
          fn(...arg)
          setTimeout(() => {
            disabled = false
          }, interval)
        }
      }
    },
    scrollTo (x, y) {
      this.$emit("scrollTo", {
        x: Math.floor(x / this.viewport.scale),
        y: Math.floor(y / this.viewport.scale),
      })
    },
  },
  beforeDestroy () {
    document.querySelector(".toolbox-viewport") &&
      document
        .querySelector(".toolbox-viewport")
        .removeEventListener("scroll", this.scroll)
  },
};
</script>

<style lang="scss" scoped>
.toolbox-toolbox {
  position: fixed;
  width: 173px;
  left: 240px;
  z-index: 1003;
  bottom: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 10px rgba(31, 35, 41, 0.06);
}
.toolbox-minimap {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 173px;
  height: 100px;
  background-color: #bbbfc4;
  overflow: hidden;
}
// .toolbox-viewport {
//   z-index: 2;
//   position: absolute;
//   box-sizing: border-box;
//   border: 1px solid hsla(0, 0%, 100%, 0.5);
//   border-radius: 2px;
//   cursor: -webkit-grab;
//   cursor: grab;
//   outline: 173px solid rgba(0, 0, 0, 0.1);
//   display: block;
//   left: 0;
//   top: 0;
// }
.toolbox-playground-viewport {
  //   width: 57.4453px;
  height: 100px;
  user-select: none;
}
.toolbox-playground-view {
  transform: scale(0.0401687);
  width: 1430.1px;
  height: 2489.5px;
  z-index: 1;
}
.toolbox-playground {
  position: absolute;
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
  //   transform-origin: left top;
}

.toolbox-viewport {
  z-index: 2;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid hsla(0, 0%, 100%, 0.5);
  border-radius: 2px;
  cursor: -webkit-grab;
  cursor: grab;
  outline: 173px solid rgba(0, 0, 0, 0.1);
}
.toolbox-miniCard {
  position: absolute;
  background: #fff;
  border-radius: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  // top: 1810.25px;
  height: 66px;
  // left: 616.95px;
  width: 196.2px;
  &.isUnFold {
    background: #c8d8ff;
  }
  &.status1 {
    background: #fed4a4;
  }
  &.status2 {
    background: #fbbfbc;
  }
}
.Toolbox-toolbar {
  width: 173px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: #fff;
  cursor: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.Toolbox-menus {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  vertical-align: top;
}

.Toolbox-separator {
  width: 1px;
  height: 16px;
  background-color: #dee0e3;
}

.Toolbox-scale-JkT8a {
  width: 38px;
  color: #646a73;
  font-weight: 500;
  line-height: 22px;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.people-btn {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  min-width: 0 !important;
  border: none;
  cursor: pointer;
  svg {
    color: #646a73;
    width: 16px;
    height: 16px;
  }
  &.default {
    svg {
      cursor: not-allowed;
      color: #b2b6bd;
    }
  }
}
svg:not(:root) {
  overflow: hidden;
}
</style>